import { Flex } from "antd-mobile";
import styles from "./index.module.css";

const titleList = [
	{ title: "区域", type: "area" },
	{ title: "方式", type: "mode" },
	{ title: "租金", type: "price" },
	{ title: "筛选", type: "more" },
];

const FilterTitle = ({ titleSelectedStatus ,onClick}) => {
	return (
		<Flex className={styles.root}>
			{titleList.map((item) => {
                const isSelected=titleSelectedStatus[item.type]
				return (
					<Flex.Item key={item.type} onClick={()=>onClick(item.type)}>
						{/* 选中类名：selected */}
						<span className={[styles.dropdown, isSelected ?styles.selected:''].join(" ")}>
							<span>{item.title}</span>
							<i className="iconfont icon-arrow"></i>
						</span>
					</Flex.Item>
				);
			})}
		</Flex>
	);
};

export default FilterTitle;
